<template>
  <fks-dialog
    title="上传视频"
    class="tiny-uploader-container"
    :visible="visible"
    :append-to-body="true"
    @close="close"
  >
    <div class="tiny-uploader">
      <fks-upload
        :action="uploadUrl"
        :limit="1"
        :with-credentials="true"
        :headers="{ 'Fawkes-Auth': accessToken }"
        :file-list="videoList"
        :before-upload="videoBeforeUpload"
        :on-success="videoUploadSuccess"
        :on-remove="videoRemove"
        :on-exceed="videoExceed"
        :on-preview="videoPreview"
      >
        <fks-button
          size="small"
          plain
          type="primary"
          icon="fks-icon-upload2"
        >
          {{
            fileToken ? '重新上传' : '点击上传'
          }}
        </fks-button>
        <span
          slot="tip"
          class="format-stint"
        >视频格式限制：MP4</span>
      </fks-upload>
    </div>
    <div slot="footer">
      <fks-button @click="cancel">
        取消
      </fks-button>
      <fks-button
        type="primary"
        :loading="loading"
        @click="saveHandler"
      >
        {{
          loading ? '上传中' : '保存'
        }}
      </fks-button>
    </div>
  </fks-dialog>
</template>

<script>
import { getFile } from './api'
export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    uploaderCb: {
      type: Function,
      default: () => {
        return {}
      }
    },
    fileToken: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      accessToken: this.$storage.get('access_token'),
      uploadUrl: process.env.VUE_APP_UPLOAD_API,
      videoList: [],
      //   fileToken: '',
      fileName: '',
      loading: false
    }
  },
  computed: {
    f8s() {
      return this.fileToken.replace('fawkes-f8s:', '')
    }
  },
  watch: {},
  mounted() {
    this.openHandler()
  },
  methods: {
    //视频上传前校验
    videoBeforeUpload(file) {
      const isVideo = file.type === 'video/mp4'
      if (!isVideo) {
        this.$message.error('上传的视频只能是 MP4 格式')
        return false
      }
      this.loading = true
    },
    videoUploadSuccess(res) {
      // console.log(res.data.fileToken)
      // console.log(this.uploaderCb)
      this.loading = false
      this.mediaInfo = res.data
      this.fileToken = this.$emit('update:fileToken', this.mediaInfo.fileToken)
      this.fileName = this.mediaInfo.fileName
    },
    //删除已上传的视频
    videoRemove() {
      this.loading = false
      this.fileToken = ''
    },
    videoExceed() {
      this.$message.error('视频上传的数量超出上限，请勿继续上传')
    },
    videoPreview(file) {
      //   this.currentFile = {
      //     extName: 'mp4',
      //     fileToken: this.formData3.clVideoToken
      //   }
      //   this.previewDialog = true
    },
    /**
     * @description:通过token获取文件
     */
    getFileHandler() {
      if (!this.fileToken && this.fileToken.indexOf('fawkes-f8s:') != -1) {
        return
      }
      getFile({ f8s: [this.f8s] })
        .then((res) => {
          if (res.status && res.data.length) {
            this.videoList.push({
              name: res.data[0].fileName,
              size: res.data[0].size,
              fileToken: res.data[0].fileToken
            })
          }
        })
        .catch(() => {
          this.videoList = []
        })
    },
    /**
     * @description:打开弹窗事件处理
     */
    openHandler() {
      this.getFileHandler()
    },
    close() {
      this.$emit('update:visible', false)
    },
    cancel() {
      this.close()
    },
    /**
     * @description:确认保存视频token
     */
    saveHandler() {
      const token = this.fileToken ? 'fawkes-f8s:' + this.f8s : ''
      const fileName = this.fileToken ? this.fileName : ''
      this.uploaderCb(token, { title: fileName })
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
// 格式限制
.tiny-uploader-container {
  z-index: 9999 !important;
}
.format-stint {
  margin-left: 20px;
  display: inline-block;
  line-height: 36px;
  color: #b4bcc7;
}
::v-deep.fks-upload-list {
  .fks-icon-download {
    display: none;
  }
  .fks-icon-close {
    // display: none;
    // &::before {
    //   content: none;
    // }
  }
}
</style>

